<template>
  <!-- v-if： 有数据再显示组件 -->
  <div class="prodetail">
    <van-nav-bar style="z-index: 999;position: relative;" :placeholder=true fixed title="活动详情" left-arrow
      @click-left="$router.go(-1)" />
    <div class="box" :style="`background: url(${product_detail.cover});`">
      <div class="frosted__glass"></div>
    </div>
    <div>
      <div class="info">
        <div class="compInfo">
          <div class="compImg">
            <van-image width="85%" height="100%" fit="cover" radius="5" :src="product_detail.cover" />
          </div>
          <div class="compName">
            <p class="Names">{{ product_detail.title }}</p>
            <div class="labels">
              <span class="oneLabel" v-for="item in product_detail.danceList" :key="item.id">{{ item.name }}</span>
            </div>
            <div class="price">
              <div>
                <span class="new">¥{{ product_detail.minPrice }}</span>
                <span style="font-weight: 500;font-size: 0.2rem;">起</span>
              </div>
            </div>
            <div style="color: #7c7c97;font-size: .3rem;">
              {{ this.$dayjs(product_detail.startTime).format('YYYY-MM-DD') }}至
              {{ this.$dayjs(product_detail.endTime).format('YYYY-MM-DD') }}
            </div>
          </div>
        </div>
        <div class="authors" @click="toOrgan(product_detail.sponsorId)">
          <van-image height=".6rem" width=".6rem" style="margin-right: .2rem;" fit="cover"
            :src="product_detail.sponsorAvatar" />
          <span>{{ product_detail.sponsorName }}</span>
        </div>
      </div>
    </div>
    <div class="desc">
      <p style="color:#8e8f8e;background: #fff;font-size: .5rem;margin-bottom:.3rem;">详情</p>
      <div class="htmlss" v-html="product_detail.content"></div>
    </div>
    <div :class="{ 'showpanel': showPanel }" style="display: block; height: 51px;position: relative;z-index: 9999;">
      <van-goods-action>
        <van-goods-action-icon icon="share-o" text="分享" @click="toShareWx" />
        <!-- <van-goods-action-icon icon="cart-o" text="发现" @click="$router.push('/cart')" /> -->
        <!-- <van-goods-action-icon icon="shop-o" text="店铺" badge="12" @click="$toast('店铺页面..')" /> -->
        <!-- <van-goods-action-button type="warning" text="加入购物车" @click="showSKUPanel(true)" /> -->
        <van-goods-action-button type="danger" icon="bag" color="linear-gradient(to right, #ff425e, #fd796d)" text="立即购买"
          @click="showSKUPanel" />
      </van-goods-action>
    </div>
    <van-popup v-model="showPanel" closeable position="bottom"
      :style="{ height: '75%', background: '#23233b', borderRadius: '.2rem .2rem 0 0' }">
      <div class="choseMenu">
        <p class="choseTitle">选择票品</p>
        <div class="voteList">
          <template v-for="(item, index) in ticketList">
            <div :class="{ 'voteItem': true, 'actVote': voteNum == index }" :key="item.id" @click="choseVote(index)">
              <div class="voteLeft">
                <div class="voteTit">{{ item.ticketType }}</div>
                <div class="voteName">{{ item.name }}</div>
                <div class="voteBrief">{{ item.description }}</div>
              </div>
              <div class="votePr">
                ￥{{ item.price }}
              </div>
            </div>
          </template>
        </div>
        <div class="voteStep">
          <div class="stepLeft">
            <p class="stepName">选择数量</p>
            <p class="stepSays">该票限购{{ choseTicket.number }}张，剩余库存{{ choseTicket.count }}张</p>
          </div>
          <div class="stepRig">
            <van-stepper v-model="stepNum" step="1" />
          </div>
        </div>
        <div class="votePric">
          <div class="pricLeft">
            <div style="font-size: .6rem;">￥{{ allPrice }}</div>
            <div style="font-size: .24rem;">总计</div>
          </div>
          <div class="rigPirc">
            <van-button @click="toBuy" color="linear-gradient(to right, #575cfe, #5e80ff)"
              style="border-radius: .2rem;width: 100%;">下一步</van-button>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import defaultImg from '@/assets/default-avatar.png'
import { mapGetters, mapMutations } from 'vuex'
import showNeedLoginDialog from '@/mixins/login-confirm-dialog'
import wx from 'weixin-js-sdk'; // 引入wxjs

export default {
  name: 'ProductDetailPage',
  mixins: [showNeedLoginDialog],
  async created() {
    this.getDetail(this.goodsId)
  },
  data() {
    return {
      showPanel: false, // 展示加购面板
      goods: {
      },
      defaultImg, // 用户默认头像
      comment_data: '', // 商品评价列表数据
      product_detail: '', // 商品详情数据
      current: 0,
      images: [], // 商品详情轮播图
      comment_count: 0, // 商品评价总数
      voteNum: 0,
      stepNum: 1,
      ticketList: [],
      choseTicket: {},
      signature: ''
    }
  },
  mounted() {
    this.getShareInfo()
  },
  methods: {
    ...mapMutations('collect', ['setSelectTicketInfo']),
    // 生成字符随机串
    generateRandomString(length) {
      var result = '';
      var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
      var charactersLength = characters.length;
      for (var i = 0; i < length; i++) {
        result += characters.charAt(Math.floor(Math.random() * charactersLength));
      }
      return result;
    },
    // vue调用微信的自定义分享
    getShareInfo() {
      this.$axios.get(`front/share`).then((res) => {
        const code = res.code
        const result = res.result
        console.log(443,new Date().getTime(),this.generateRandomString(10));
        if (code == 0) {
          this.save = {
            url: location.href.split('#')[0] // 只需要传当前页面地址
          };
          wx.config({
            appId: 'wxe07d768775a370d4',  // appID 公众号的唯一标识
            timestamp: new Date().getTime(), // 生成签名的时间戳
            nonceStr: this.generateRandomString(10), //  生成签名的随机串
            signature: result, // 生成的签名
            jsApiList: [
              'updateAppMessageShareData', // 分享到朋友
              'updateTimelineShareData', // 分享到朋友圈
            ]
          });

          wx.ready(() => {
            var shareData = {
              title: '舞匣',
              desc: '舞匣极简打分器',
              link: 'https://test.dancebox.cn/html/static/H5scoring/index.html#/home', // 分享后的地址
              imgUrl: '@/assets/multif.jpg'
            };
            //点击要去分享
            wx.updateAppMessageShareData(shareData);
            wx.updateTimelineShareData(shareData);
          });
        } else {
          // alert('分享失败');
        }
        wx.error(res => {
          console.log("wx.config error:", res);
          // if ( config_num < 10) {
          //   config_num++
          //   _wxConfig(config)
          // }
        })
      });
    },
    toShareWx() {
      var broser = window.navigator.userAgent.toLowerCase();
      //通过正则表达式匹配broser 中是否含有MicroMessenger字符串
      if (broser.match(/MicroMessenger/i) == 'micromessenger') {
        // this.weixin();
        this.getShareInfo()
      } else {
        this.$toast.fail({
          duration: 1000, // 持续展示 toast
          forbidClick: true,
          message: '请使用微信浏览器打开',
        });
      }
    },
    getDetail(id) {
      this.$axios.get(`front/activity/${id}`).then((res) => {
        this.product_detail = res.result
      });
    },
    toOrgan(id) {
      this.$router.push({
        path: '/organDetail',
        query: {
          id
        }
      })
    },
    toBuy() {
      console.log(this.choseTicket)

      let params = {
        info: { ...this.choseTicket, activeImg: this.product_detail.cover },
        num: this.stepNum,
        id: this.goodsId
      }
      this.setSelectTicketInfo(params)
      localStorage.setItem('SelectTicketInfo', JSON.stringify(params))
      this.$router.push({
        path: this.choseTicket.isRealName != 0 ? '/pay' : '/confirmOrder'
      })
    },
    choseVote(index) {
      this.stepNum = 1
      this.voteNum = index
      this.choseTicket = this.ticketList[index]
    },
    // 轮播改变时触发，index为当前页索引
    onChange(index) {
      this.current = index
    },
    showSKUPanel() {
      this.$axios.get(`front/activity/ticket/${this.goodsId}`).then((res) => {
        if (res.code == 0) {
          this.ticketList = res.result
          if (this.ticketList.length > 0) {
            this.choseTicket = this.ticketList[0]
          }
          this.showPanel = true
        } else {
          this.$toast.fail('请登录后在进行订单支付!')
          this.$router.push('/ticketing/loginIndex')
        }
      });
    },
  },
  computed: {
    goodsId() {
      console.log(this.$route)
      return this.$route.params.productid
    },
    allPrice() {
      return this.stepNum * this.choseTicket.price
    },
    ...mapGetters('user', ['isLogin']),
    ...mapGetters('cart', ['cartLength'])
  }
}
</script>

<style lang="less" scoped>
.htmlss {
  padding: 0 .2rem;
}

/deep/ .van-stepper__minus,
/deep/ .van-stepper__plus {
  background: #2b2c48;
  color: #fff;
}

/deep/ .van-stepper__input {
  background: #23233b;
  color: #fff;
}

.actVote {
  border: 2px solid #fff;
  background: #fc5b9f !important;
}

.choseMenu {
  color: #fff;
  margin-top: 1rem;
  position: relative;

  .choseTitle {
    font-size: .32rem;
    position: absolute;
    top: -.7rem;
    left: .3rem;
  }

  .voteList {
    width: 100%;
    height: 45vh;
    overflow: auto;
  }

  .voteItem {
    width: 90%;
    margin: auto;
    background: #2b2c48;
    border-radius: .2rem;
    display: flex;
    padding: 15px;
    min-height: 100px;
    position: relative;
    margin-bottom: .2rem;

    .voteLeft {
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .voteTit {
        font-size: 12px;
        width: 1rem;
        height: 25px;
        text-align: center;
        padding: 5px;
        background: #e645ac;
        border-radius: 5px;
      }

      .voteName {
        font-size: 14px;
      }

      .voteBrief {
        font-size: 12px;
      }
    }

    .votePr {
      position: absolute;
      right: 15px;
      bottom: 15px;
      font-size: 15px;
    }
  }

  .voteStep {
    color: #fff;
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 20px .2rem .2rem 15px;

    .stepName {
      font-size: 16px;
      margin-bottom: .2rem;
    }

    .stepSays {
      font-size: 12px;
    }
  }

  .votePric {
    display: flex;
    justify-content: space-between;
    padding: 0 .2rem .2rem 15px;

    .pricLeft {
      color: #fff;
    }

    .rigPirc {
      width: 60%;
    }
  }
}

.van-popup--bottom {
  z-index: 9999 !important
}

.box {
  position: fixed;
  top: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: 100%;
  background-position: center;
}

.frosted__glass {
  width: 100%;
  min-height: 5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 60px;
  letter-spacing: 0.5em;
  backdrop-filter: blur(.2rem);
  color: #fff;
  box-shadow: 0 0 .6rem .2rem rgba(0, 0, 0, .3);
}

/* 追加van-goods-action的样式，修复顶部有badge时内容会溢出一点点的问题、右边距要比左边距大一些，不然不好看。*/
.van-goods-action {
  padding: 2px 5px 2px 2px;
}

/* 显示面板的时候将fix的固定高度去掉 */
.showpanel {
  //display: none !important;
  height: 0 !important;
}

.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  color: white;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 15px;
}

.prodetail {
  ::v-deep .van-icon-arrow-left {
    color: #333;
  }

  img {
    display: block;
    width: 100%;
  }

  .desc {
    width: 100%;
    top: 3rem;
    height: 8rem;
    overflow-y: auto;
    position: relative;
    z-index: 99;
    background: #fff;

    * {
      width: 100%;
      word-wrap: break-word;
    }

    ::v-deep img {
      display: block;
      width: 100% !important;
    }
  }

  .info {
    padding: .2rem;
    background: #fff;
    position: relative;
    top: 3rem;
    height: 3.2rem;
    z-index: 99;
    border-radius: .2rem .2rem 0 0;

    .compInfo {
      height: 100%;
      position: absolute;
      top: -2rem;
      display: flex;
      width: 100%;
    }

    .authors {
      border-left: 2px solid #c75772;
      position: absolute;
      top: 1.4rem;
      padding: .2rem 0 .2rem .2rem;
      height: 1rem;
      line-height: 1rem;
      display: flex;
      align-items: center;
      font-size: .4rem;
    }

    .compName {
      width: 55%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .Names {
        color: #fff;
        height: 35%;
        font-size: 0.33rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .labels {
        overflow-x: auto;
        white-space: nowrap;
        min-width: 48vw;
        color: #fff;
        font-size: 0.3rem;
        height: 23%;
        display: flex;
        margin-bottom: .2rem;
        align-items: center;

        &::-webkit-scrollbar {
          display: none;
        }

        .oneLabel {
          display: flex;
          align-items: center;
          background: rgba(0, 0, 0, .5);
          border-radius: .7rem;
          padding: .1rem .2rem;
          font-size: .26rem;
          height: 0.55rem;
          margin-right: 0.2rem
        }
      }

      .price {
        display: flex;
        justify-content: space-between;
        color: #ff3d5e;
        font-size: 0.3rem;

        .new {
          font-weight: 700;
          margin-right: 5px;
        }

        .old {
          text-decoration: line-through;
          font-size: 12px;
        }
      }
    }

    .compImg {
      width: 40%;
      height: 100%;
    }
  }

  .title {
    display: flex;
    justify-content: space-between;

    .now {
      color: #fa2209;
      font-size: 20px;
    }

    .oldprice {
      color: #959595;
      font-size: 16px;
      text-decoration: line-through;
      margin-left: 5px;
    }

    .sellcount {
      color: #959595;
      font-size: 16px;
      position: relative;
      top: 4px;
    }
  }

  .msg {
    font-size: 16px;
    line-height: 24px;
    margin-top: 5px;
  }

  .service {
    display: flex;
    justify-content: space-between;
    line-height: 40px;
    margin-top: .2rem;
    font-size: 16px;
    background-color: #fafafa;

    .left-words {
      span {
        margin-right: .2rem;
      }

      .van-icon {
        margin-right: 4px;
        color: #fa2209;
      }
    }
  }

  .comment {
    text-align: start;
    padding: .2rem;
  }

  .comment-title {
    display: flex;
    justify-content: space-between;

    .right {
      color: #959595;
    }
  }

  .comment-item {
    font-size: 16px;
    line-height: .6rem;

    .top {
      height: .6rem;
      display: flex;
      align-items: center;
      margin-top: 20px;

      img {
        width: 20px;
        height: 20px;
      }

      .name {
        margin: 0 .2rem;
      }
    }

    .time {
      color: #999;
    }
  }

}

.tips {
  padding: .2rem;
}
</style>
